<template>
  <div class="memberNum">
    <span>
      <el-icon><avatar/></el-icon>
    </span>
    <span>{{ 会员总数 }}</span>
    <span>会员总数(人)</span>
  </div>
  <div class="memberNewlyAdded">
    <span>
      <el-icon><arrow-up-bold/></el-icon>
    </span>
    <span>{{ 会员新增 }}</span>
    <span>会员新增(人)</span>
  </div>
  <div class="consumptionTotal">
    <span>
<svg t="1626936838023" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
     p-id="2337"><path
  d="M632.99112 466.299145c25.160029 0 45.700855 20.458961 45.700855 45.700855 0 15.35164 12.389168 27.768437 27.714202 27.768437 15.378246 0 27.821649-12.416797 27.821649-27.768437 0-55.753815-45.429679-101.211123-101.237729-101.211123l-93.087095 0 0-40.782845c0-15.325034-12.390191-27.741831-27.714202-27.741831-15.379269 0-27.76946 12.417821-27.76946 27.741831L484.41934 410.788877l-93.087095 0c-55.863309 0-101.183494 45.347814-101.183494 101.211123l0 11.004635c0 55.781444 45.321208 101.2101 101.183494 101.2101l93.087095 0 0 111.019513-93.087095 0c-25.160029 0-45.700855-20.458961-45.700855-45.700855 0-15.35164-12.444427-27.740808-27.768437-27.740808-15.32401 0-27.714202 12.389168-27.714202 27.740808 0 55.781444 45.321208 101.238752 101.183494 101.238752l93.087095 0 0 33.799804c0 15.35164 12.390191 27.76946 27.76946 27.76946 15.32401 0 27.714202-12.417821 27.714202-27.76946l0-33.799804 93.087095 0c55.753815 0 101.237729-45.375443 101.237729-101.238752l0-19.698644c0-55.753815-45.429679-101.184517-101.237729-101.184517l-93.087095 0L539.903002 466.299145 632.99112 466.299145zM484.420363 568.650231l-93.087095 0c-25.160029 0-45.700855-20.48659-45.700855-45.728484l0-11.004635c0-25.160029 20.487613-45.728484 45.700855-45.728484l93.087095 0L484.420363 568.650231zM632.99112 624.133893c25.160029 0 45.700855 20.48659 45.700855 45.700855l0 19.698644c0 25.160029-20.487613 45.700855-45.700855 45.700855l-93.087095 0 0-111.100354L632.99112 624.133893z"
  p-id="2338" fill="#ffffff"></path><path
  d="M900.62253 610.005105c0.10847-186.717565-136.614447-341.563236-315.39832-369.81979l77.81732-79.094406c33.854039-34.452673 8.911974-94.228081-39.777959-94.228081L403.288554 66.862827c-48.689932 0-75.860758 59.775408-42.059931 94.228081l77.924767 79.094406c-178.892343 28.256554-315.561026 183.103248-315.561026 369.81979l0 37.712927c0 0.461511-0.216941 0.842181-0.216941 1.303692L123.375423 875.789447c0 44.858674 36.46347 81.34875 81.349773 81.34875l614.494349 0c44.886303 0 81.34875-36.490076 81.34875-81.34875L900.568295 741.565443l0.055259 0L900.623553 610.005105zM403.234319 124.573203l217.85575 0L518.819824 228.555439c-2.119267 2.254344-4.837168 2.716878-6.630001 2.716878-1.848091 0-4.455475-0.462534-6.684236-2.716878L403.234319 124.573203zM845.031421 875.789447c0 14.210653-11.57564 25.75764-25.812899 25.75764L204.725196 901.547087c-14.237259 0-25.811876-11.546987-25.811876-25.75764L178.913321 741.565443l0.216941 0L179.130262 610.005105c0-43.092447 8.368598-84.826967 25.050536-124.115785 16.031115-37.984103 39.017642-72.083735 68.307735-101.401458 29.344329-29.290093 63.416332-52.27662 101.401458-68.333318 39.288818-16.655332 81.023338-25.051559 124.116809-25.051559l28.256554 0c43.147706 0 84.881203 8.396227 124.171044 25.051559 37.929868 16.056698 72.057129 39.043225 101.347223 68.333318 29.344329 29.316699 52.330856 63.417355 68.360947 101.401458 16.57449 39.098483 24.888853 80.616062 24.997324 123.491569 0.272199 11.683087 0.326435 24.290219-0.216941 39.044248 0 0.216941 0.10847 0.38067 0.10847 0.597611L845.031421 875.789447z"
  p-id="2339" fill="#ffffff"></path></svg>
    </span>
    <span>{{ 会员消费总额 }}</span>
    <span>会员消费总额(万元)</span>
  </div>
  <div class="avgConsumption">
    <span>
      <svg t="1626937765575" class="icon" viewBox="0 0 1431 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
           p-id="2825">
      <path
        d="M573.346 447.659l44.199 86.601h1.364v0.645h-55.115v19.945h55.115v29.545h-55.115v19.901h55.115v115.42h-41.509v19.908h157.101v-19.908h-39.42v-115.42h53.050v-19.901h-53.050v-29.542h53.050v-19.945h-53.050v-5.484h-0.666l46.211-81.763v-0.647h34.72v-19.949h-95.243v19.949h24.973l-46.709 82.41h-7.271l-42.579-82.41h23.3v-19.949h-95.228v19.949h36.756v0.647zM850.832 303.159v-180.47c-12.222-56.297-82.604-50.551-97.373 0v180.47h-35.1v-219.868c-23.887-53.525-75.049-52.722-97.409 0v219.868h-35.063v-182.869c-21.013-44.763-73.79-54.397-97.409 0v182.869h-35.056v-141.146c-16.881-42.941-72.726-56.985-97.414 0v141.146h-167.757v515.305h173.2c5.122 175.671 139.228 317.247 302.971 317.247s297.867-141.573 302.971-317.247h156.299v-515.305h-272.858zM1091.256 790.71h-128.357v-239.015c-16.881-87.477-72.668-116.066-97.373 0v239.015h-649.85v-457.327h875.581v457.327zM1091.256 790.71z"
        p-id="2826" fill="#ffffff"></path>
    </svg>
    </span>
    <span>{{ 会员平均消费 }}</span>
    <span>会员平均消费(元)</span>
  </div>
</template>

<script lang="ts">
import {defineComponent, reactive, toRefs} from "vue";
import {vipStatus} from "@/api/dataScreen";
import dayjs from "dayjs";
import {round} from "number-precision";
import {ArrowUpBold, Avatar} from "@element-plus/icons-vue";

export default defineComponent({
  setup(props, context) {
    const state = reactive(new class {
      会员总数: any = 0;
      会员新增: any = 0;
      会员消费总额: any = 0;
      会员平均消费: any = 0;
    });

    async function getData(stationCode: number, searchDate: any) {
      const data = await vipStatus(stationCode, dayjs(searchDate[0]).format('YYYY-MM-DD'), dayjs(searchDate[1]).format('YYYY-MM-DD'));
      state.会员总数 = data && data[0] && data[0]['会员总数'] || 0;
      state.会员新增 = data && data[0] && data[0]['会员新增'] || 0;
      state.会员消费总额 = data && data[0] && round(data[0]['区间会员消费总额(万)'] || 0, 0);
      state.会员平均消费 = data && data[0] && round(data[0]['区间会员平均消费(元)'] || 0, 0);
    }

    return {
      ...toRefs(state),
      getData
    }
  },
  components: {
    Avatar,
    ArrowUpBold
  }
});
</script>

<style scoped>
.memberNum {
  position: absolute;
  top: 25%;
  left: 5%;
  color: white;
  width: 12.5rem;
  height: 5.625rem;
}

.memberNum span:nth-child(1) {
  color: white;
  display: inline-block;
  width: 2.625rem;
  height: 2.625rem;
  background-color: rgba(186, 85, 211, 0.2);
  border-radius: 50%;
  text-align: center;
  line-height: 2.625rem;
  font-size: 1.25rem;
}

.memberNum span:nth-child(2) {
  font-size: 1.6875rem;
  position: relative;
  left: 5%;
  top: -5%;
  width: 50%;
  display: inline-block;
}

.memberNum span:nth-child(3) {
  font-size: 0.65rem;
  position: relative;
  left: 28%;
  top: -22%;
  width: 55%;
  display: inline-block;
  color: lightgrey;
}

.memberNewlyAdded {
  position: absolute;
  top: 25%;
  left: 55%;
  color: white;
  width: 12.5rem;
  height: 5.625rem;
}

.memberNewlyAdded span:nth-child(1) {
  color: white;
  display: inline-block;
  width: 2.625rem;
  height: 2.625rem;
  background-color: rgba(99, 184, 255, 0.2);
  border-radius: 50%;
  text-align: center;
  line-height: 2.625rem;
  font-size: 1.25rem;
}

.memberNewlyAdded span:nth-child(2) {
  font-size: 1.6875rem;
  position: relative;
  left: 5%;
  top: -5%;
  width: 50%;
  display: inline-block;
}

.memberNewlyAdded span:nth-child(3) {
  font-size: 0.65rem;
  position: relative;
  left: 28%;
  top: -22%;
  width: 55%;
  display: inline-block;
  color: lightgrey;
}

.consumptionTotal {
  position: absolute;
  top: 60%;
  left: 5%;
  color: white;
  width: 12.5rem;
  height: 5.625rem;
}

.consumptionTotal span:nth-child(1) {
  color: white;
  display: inline-block;
  width: 2.625rem;
  height: 2.625rem;
  background-color: rgba(255, 0, 0, 0.2);
  border-radius: 50%;
  text-align: center;
  line-height: 2.625rem;
  font-size: 1.25rem;
}

.consumptionTotal span:nth-child(1) svg {
  width: 1.375rem;
  height: 1.375rem;
  /*line-height: 1.775rem;*/
}

.consumptionTotal span:nth-child(2) {
  font-size: 1.6875rem;
  position: relative;
  left: 5%;
  top: -10%;
  width: 55%;
  display: inline-block;
}

.consumptionTotal span:nth-child(3) {
  font-size: 0.65rem;
  position: relative;
  left: 28%;
  top: -25%;
  width: 55%;
  display: inline-block;
  color: lightgrey;
}

.avgConsumption {
  position: absolute;
  top: 60%;
  left: 55%;
  color: white;
  width: 12.6rem;
  height: 5.625rem;
}

.avgConsumption span:nth-child(1) {
  color: white;
  display: inline-block;
  width: 2.625rem;
  height: 2.625rem;
  background-color: rgba(0, 205, 102, 0.2);
  border-radius: 50%;
  text-align: center;
  line-height: 2.625rem;
  font-size: 1.25rem;
}

.avgConsumption span:nth-child(1) svg {
  width: 1.375rem;
  height: 1.375rem;
  /*line-height: 1.875rem;*/
}

.avgConsumption span:nth-child(2) {
  font-size: 1.6875rem;
  position: relative;
  left: 5%;
  top: -10%;
  width: 55%;
  display: inline-block;
}

.avgConsumption span:nth-child(3) {
  font-size: 0.65rem;
  position: relative;
  left: 28%;
  top: -25%;
  width: 50%;
  display: inline-block;
  color: lightgrey;
}
</style>
